<template>
  <div class="app-container">
    <SearchForm
      v-show="showSearch"
      v-model="queryParams"
      :options="options.formOps"
      @onQuery="getList"
    >
      <template #default="{ filterForm, handleQuery }">
        <el-col :span="6">
          <el-form-item label="重大危险源名称" prop="fileName">
            <el-input
              @keyup.enter="handleQuery"
              @change="handleQuery"
              v-model="filterForm.dangerName"
              maxlength="30"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="负责人类型" prop="fileName">
            <el-select
              style="width: 100%"
              v-model="filterForm.dutyType"
              @change="handleQuery"
              clearable
            >
              <el-option
                v-for="dict in personTypes"
                :key="dict.label"
                :label="dict.label"
                :value="dict.label"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </template>
    </SearchForm>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['sysDuty:create']"
          >新增</el-button
        >
      </el-col>

      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <Table
      ref="table"
      :auto-featch="true"
      :fetch-data="fetchData"
      :options="options.table"
    >
      <template #default>
        <el-table-column
          label="重大危险源名称"
          align="center"
          key="dangerName"
          prop="dangerName"
        />
        <el-table-column
          label="内容"
          align="center"
          key="dutyInfoName"
          prop="dutyInfoName"
          minWidth="350"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="负责人类型"
          align="center"
          key="dutyType"
          prop="dutyType"
        />
        <el-table-column
          label="时间"
          align="center"
          key="createTime"
          prop="createTime"
        />
        <el-table-column label="完成状态" align="center">
          <template #default="{ row }"> {{ row.whetherDelete }} </template>
        </el-table-column>
      </template>
      <template #actionButton="{ row }">
        <el-button
          type="text"
          icon="Edit"
          @click="handleEdit(row)"
          v-hasPermi="['sysDuty:update']"
          >修改</el-button
        >
        <el-button
          type="text"
          icon="Delete"
          style="color: red"
          @click="handleDel(row)"
          v-hasPermi="['sysDuty:delete']"
          >删除</el-button
        >
      </template></Table
    >
    <DialogVform
      :formJson="formJson"
      ref="dialogVform"
      @onSubmit="onSubmit"
      :slots="['slotDefault']"
      :title="dialogType == 'add' ? '新增履职记录' : '修改履职记录'"
    >
      <template #slotDefault>
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="重大危险源名称" prop="dangerName">
              <el-select
                style="width: 100%"
                v-model="form.dangerName"
                clearable
                :disabled="dialogType != 'add'"
              >
                <el-option
                  v-for="dict in dangerUnitName"
                  :key="dict"
                  :label="dict"
                  :value="dict"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人类型" prop="fileName">
              <el-select
                style="width: 100%"
                v-model="form.dutyType"
                @change="changeDutyType"
                :disabled="dialogType != 'add'"
                clearable
              >
                <el-option
                  v-for="dict in personTypes"
                  :key="dict.label"
                  :label="dict.label"
                  :value="dict.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <template v-for="(item, index) in indexs">
              <el-form-item
                prop="fileName"
                label-position="top"
                class="labelTop"
              >
                <template #label>
                  <div>{{ map[index] + "、" + item }}</div>
                </template>
                <el-input
                  :disabled="dised.includes(item)"
                  type="textarea"
                  v-model="dutyData[item]"
                ></el-input>
                <div style="width: 100%; text-align: right">
                  {{ timeData[item] }}
                </div>
              </el-form-item>
            </template>
          </el-col>
        </el-row>
      </template>
    </DialogVform>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import SearchForm from "@/components/searchForm/index";
import DialogVform from "@/components/dialogVform/index";
import { apis as APIS } from "@/api/hdanger/lvzhijilu/new.js";
import formJson from "./components/options.json";
import { useAsyncData, useFormJson } from "@/views/hooks/useAsyncData.js";
import { dutyOptions, dised } from "./components/consts";
const ops = useFormJson(formJson, {
  sort: [],
  sortable: [],
});
const { proxy } = getCurrentInstance();
const showSearch = ref(true);

const options = reactive({
  table: ops,
  formOps: ops.filter((i) => ["dangerName", "dangerLevel"].includes(i.prop)),
});
// 重大危险源名称
const dangerUnit = ref([]);
const dangerUnitName = ref([]);
// 负责人类型
const personTypes = ref([
  {
    label: "主要负责人",
  },
  {
    label: "技术负责人",
  },
  {
    label: "操作负责人",
  },
]);
const table = ref();
const dialogVform = ref();
// 履职内容
const dutyData = ref({});
const indexs = ref([]);
const map = {
  0: "一",
  1: "二",
  2: "三",
  3: "四",
  4: "五",
  5: "六",
  6: "七",
  7: "八",
  8: "九",
};
const changeDutyType = (val) => {
  dutyData.value = JSON.parse(JSON.stringify(dutyOptions[val]));
  indexs.value = Object.keys(dutyData.value);
  console.log(dutyOptions[val]);
};

watch(
  () => dutyData,
  () => {
    form.value.dutyData = JSON.stringify(dutyData.value);
  },
  {
    deep: true,
  }
);
const timeData = ref({});
const plugEdit = (row) => {
  form.value.dutyType = row.dutyType;
  form.value.checkDept = row.checkDept;
  form.value.dangerName = row.dangerName;
  let formData = JSON.parse(row.dutyData);
  indexs.value = Object.keys(formData);
  indexs.value.forEach((item) => {
    let itemData = {};
    try {
      itemData = JSON.parse(formData[item]);
    } catch (error) {
      itemData = {
        key: formData[item],
        value: null,
      };
    }
    dutyData.value[item] = itemData.key;
    timeData.value[item] = itemData.value;
  });
  console.log(dutyData);
};
const plugAdd = (row) => {
  form.value.dutyType = "";
  form.value.checkDept = "";
  form.value.dangerName = "";
  dutyData.value = {};
  timeData.value = {};
  indexs.value = [];
};

const {
  onSubmit,
  fetchData,
  dialogType,
  handleAdd,
  handleEdit,
  getList,
  handleDel,
  queryParams,
  form,
} = useAsyncData({
  APIS,
  formJson,
  dialogVform,
  table,
  proxy,
  plugEdit,
  plugAdd,
  // filterForm: {
  //   dutyType: "主要负责人",
  // },
});

onMounted(() => {
  APIS.getAllDept({}).then((res) => {
    dangerUnit.value = res.rows;
    dangerUnitName.value = res.data.map((item) => {
      return item.dangerName;
    });
  });
});
</script>

<style lang="scss">
.labelTop.el-form-item {
  .el-form-item__label {
    justify-content: start;
    text-align: left !important;
    width: 100% !important;
    margin-bottom: 15px;
  }
  display: block;
}
</style>
